<template>
  <div class="wrap">
    <h4><var-icon name="cellphone" />{{ data.Com_qq }}</h4>
    <p>游戏账号：{{ data.idv_id }}</p>
    <p>社交账号：{{ data.Com_Cocial_media }}</p>
    <var-divider dashed />
    <p class="introduction">自我介绍：{{ data.introduction }}</p>
    <var-divider dashed />
    <div class="btn-wrap">
        <template v-if="data.Status===0">
            <var-button block type="primary" @click="handlePass(data.Id)">通过</var-button>
            <var-button block type="danger" @click="handleFail(data.Id)">不通过</var-button>
        </template>
        <template v-if="data.Status===1">
          <div class="success-wrap">
              通过<var-icon name="checkbox-marked" />
            </div>
        </template>
        <template v-if="data.Status===2">
            <div class="fail-wrap">
              不通过<var-icon name="close-box" />
            </div>
        </template>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(["data"]);
const emit = defineEmits(['refresh'])
const handleFail = (id:number)=>{
  setFail(id)
  .then(res=>{
        Snackbar.success("处理成功！")
        emit('refresh')
    })
    .catch(err=>{
        Snackbar.error("处理失败！")
    })
}
const handlePass = (id:number)=>{
    setPass(id)
    .then(res=>{
        Snackbar.success("处理成功！")
        emit('refresh')
    })
    .catch(err=>{
        Snackbar.error("处理失败！")
    })
}
</script>

<style scoped lang="less">
.wrap {
  width: 96%;
  margin: 10px auto 3vh;
  border: 1px solid #e7e7e7;
  h4 {
    padding: 10px;
    background-color: @shaColor;
    color:#e7e7e7;
  }
  p {
    padding: 10px;
    color: #707070;
  }
  .introduction {
    width: 96%;
    height: 15vh;
    font-size: 0.8em;
    overflow-y: auto;
    word-break: normal;
    white-space: pre-warp;
    word-wrap: break-word;
  }
}
.btn-wrap{
    display: flex;
    justify-content: space-around;
    gap:10px;
    margin:10px;
    align-items: center;
}
.success-wrap{
  font-size: 16px;
  font-weight: 600;
  color: rgb(25, 153, 25);
}
.fail-wrap{
  font-size: 16px;
  font-weight: 600;
  color: rgb(230, 34, 63);
}
</style>
